<template>
  <div class="info-items" @click="gotoTvInfo(data.video_id)">
     <TipsView :icon="Tipsicon" :text="Tipstext" ref="childTips"></TipsView>
            <div :class="(Index+1)%2===0?'info-of-video':'info-of-video info-of-video-active-odd'">
              <div class="left">
                <div class="video-img" >
                  <img :src="data.video_cover.video_cover_url" :style="coverSize" alt="" />
                  <div class="duration">{{duration}}</div>
                  <div v-if="sortState" :class=" sign ">
                    <div class="list-num">{{Index+1}}</div>
                  </div>
                </div>
                <div class="center">
                  <div class="video-infotitle"  >{{data.video_title}}<!-- 超过30个字以...代替---></div>
                  <div class="publish-info"  >
                    <span class="views">{{data.video_play_num}}次观看 </span> •
                    <span class="interaction">{{data.video_up_num}}点赞</span> •
                    <span class="interaction">{{data.video_time}}</span>
                  </div>
                  <div class="publish-info-min"  >
                    <div class="views">{{data.video_play_num}}次观看 </div>

                    <div class="interaction">{{data.video_time}} • {{data.video_up_num}}点赞</div>
                  </div>
                  <div class="publish-author">
                    <div class="publish-author-img" @click.stop="goUserHome(data.uid)">
                      <img :src="data.avatar" alt="" />
                    </div>
                    <div class="publish-author-name"  @click.stop="goUserHome(data.uid)">@{{data.username}}</div>
                  </div>
                </div>
              </div>
              <div class="right" >
                <div :class="Index!==0? 'heat-num' :'heat-one'">{{data.hot_Str}}</div>
                <div class="heat">综合热度</div>
              </div>
            </div>

          </div>
</template>

<script>
import TipsView from '@/components/utilView/tipView.vue'
import http from '@/util/http'
import { mapState } from 'vuex'

export default {
  data () {
    return {
      Tipsicon: 'icon-jinggao',
      Tipstext: ''
    }
  },
  components: {
    TipsView
  },
  props: {
    data: {
      type: Object,
      default: null
    },
    Index: {
      type: Number,
      default: null
    },
    sortState: {
      type: Boolean,
      default: true
    }
  },

  computed: {
    ...mapState(['user']),
    // 排行数字样式
    sign () {
      let a = 'number num-position-one'
      if (this.Index === 0) {
        a = 'number num-position-one'
      } else if (this.Index === 1) {
        a = 'number num-position-two'
      } else if (this.Index === 2) {
        a = 'number num-position-three'
      } else {
        a = 'number '
      }
      return a
    },
    // 显示视频封面的中心部分
    coverSize () {
      const a = {}
      if (this.data.video_cover.width >= this.data.video_cover.height) {
        a.width = this.data.video_cover.width / this.data.video_cover.height * 100 + '%'
        a.left = -(this.data.video_cover.width / this.data.video_cover.height - 1) / 2 * 100 + '%'
        a.height = '100%'
      } else {
        a.height = this.data.video_cover.height / this.data.video_cover.width * 100 + '%'
        a.top = -(this.data.video_cover.height / this.data.video_cover.width - 1) / 2 * 100 + '%'
        a.width = '100%'
      }
      return a
    },
    // 显示视频的时长
    duration () {
      let time = ''
      if (this.data.video_duration < 60) {
        let miao = this.data.video_duration
        if (this.data.video_duration < 10) {
          miao = '0' + this.data.video_duration
        }

        time = '0:' + miao
      } else if (this.data.video_duration > 60 && this.data.video_duration < 3600) {
        let fen = null
        let miao = null
        fen = Math.trunc(this.data.video_duration / 60)
        miao = Math.trunc(this.data.video_duration % 60)
        if (miao < 10) {
          miao = '0' + miao
        }
        if (fen < 10) {
          fen = '0' + fen
        }
        time = fen + ':' + miao
      } else if (this.data.video_duration > 3600) {
        let shi = null
        let fen = null
        let miao = null
        shi = Math.trunc(this.data.video_duration / 3600)
        fen = Math.trunc((this.data.video_duration % 36000) / 60)
        miao = Math.trunc(this.data.video_duration % 60)
        if (miao < 10) {
          miao = '0' + miao
        }
        if (fen < 10) {
          fen = '0' + fen
        }
        time = shi + ':' + fen + ':' + miao
      }

      return time
    }
  },
  methods: {
    tipsMethod (text) {
      this.$refs.childTips.HanderTiming(1200)
      this.Tipstext = text
    },
    // 跳转到查看其他用户详情
    goUserHome (uuid) {
      // 校验登录
      const checkState = this.$checkU()
      if (!checkState) {
        this.tipsMethod('请先登录')
        return
      }
      if (this.user.uid === uuid) {
        this.$router.push({ path: '/user/myhome' })
      } else {
        this.$router.push({ path: '/home/userHome', query: { uuid: uuid } })
      }
    },
    // 跳转到视频详情页面
    gotoTvInfo (vid) {
      this.$router.push({ path: '/videodetail', query: { videoId: vid } })
      // 记录播放历史
      // 传递观看者的id和视频的id
      http.addTvhistory(this.user.uid, vid).then(res => {
        console.log(res.data)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.info-items {
          width: 100%;

          .info-of-video-active-odd{
            background: #f9f9f9 !important;
          }

          .info-of-video {
            width: 100%;
            border-radius: 5px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            cursor: pointer;
            background: #fff;

            .left {
              // width: 100%;
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding-left: 20px;

              .video-img {
                width: 170px;
                height: 100px;
                border-radius: 5px;
                overflow: hidden;
                position: relative;

                img {
                position: absolute;
                  display: block;
                  width: 100%;
                  height: 100%;
                  border-radius: 5px;
                  object-fit: cover;

                  &:hover {
                    filter: brightness(70%);
                    opacity: 1;
                  }
                }
                .duration {
                  color: #eee;
                  font-size: 12px;
                  padding: 0 5px;
                  background: rgba($color: #000, $alpha: 0.8);
                  position: absolute;
                  bottom: 5%;
                  right: 5%;
                }
                .number {
                  background: url(/public/video-bd.png) no-repeat 0 0;
                  position: absolute;
                  top: 0;
                  left: 0;
                  width: 38px;
                  height: 38px;
                  background-size: 38px 160px;
                  display: flex;
                  align-items: center;

                  .list-num {
                    font-size: 20px;
                    font-weight: 700;
                    color: #fff;
                    padding: 4px 6px 8px 4px;
                  }
                }
                .num-position-one {
                  background-position: 0 -40px;
                }
                .num-position-two {
                  background-position: 0 -80px;
                }
                .num-position-three {
                  background-position: 0 -120px;
                }
              }
              .center {
                line-height: 18px;
                padding-left: 10px;

                .video-infotitle {
                  font-size: 14px;
                  // width: 5.2rem;
                  font-weight: 700;
                  color: #333;
                  // padding: 10px 10px 20px;

                  display: -webkit-box;
                  -webkit-line-clamp: 1; //显示1行
                  -webkit-box-orient: vertical;
                  overflow: hidden;
                  // white-space: nowrap;
                  text-overflow: ellipsis; //多的用省略号显示

                  &:hover {
                    color: #f90;
                  }
                }
                .publish-info {
                  line-height: 18px;
                  font-size: 14px;
                  color: #939393;
                  padding-top: 5px;
                }
                .publish-info-min{
                  line-height: 18px;
                  font-size: 14px;
                  color: #939393;
                  padding-top: 5px;
                  display: none;
                }
                .publish-author {
                  display: flex;
                  align-items: center;
                  padding-top: 10px;

                  .publish-author-img {
                    width: 35px;
                    height: 35px;
                    border-radius: 50%;
                    overflow: hidden;
                    border: 1px solid #f5f5f5;

                    img {
                      display: block;
                      width: 100%;
                      border-radius: 50%;
                      object-fit: cover;

                      &:hover {
                        filter: brightness(90%);
                        opacity: 1;
                      }
                    }
                  }
                  .publish-author-name {
                    color: #939393;
                    font-size: 12px;
                    padding-left: 5px;

                    &:hover {
                      color: #f90;
                    }
                  }
                }
              }

            }

            .right {
              color: #939393;
              font-size: 12px;
              text-align: center;
              padding-right: 20px;

              .heat-num {
                font-size: 20px;
                font-weight: 700;
                color: #333;
              }
              .heat-one {
                font-size: 20px;
                font-weight: 700;
                color: #dc0101;
              }
              .heat {
                padding-top: 5px;
              }
            }

          }
          @media screen and (min-width:856px) and (max-width:1154px) {
            .info-of-video {
            width: 100%;
            border-radius: 5px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            cursor: pointer;
            background: #fff;
            .left {
              // width: 100%;
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding-left: 20px;

              .video-img {
                width: 170px;
                height: 100px;
                border-radius: 5px;
                overflow: hidden;
                position: relative;

                img {
                position: absolute;
                  display: block;
                  width: 100%;
                  height: 100%;
                  border-radius: 5px;
                  object-fit: cover;

                  &:hover {
                    filter: brightness(70%);
                    opacity: 1;
                  }
                }
                .duration {
                  color: #eee;
                  font-size: 12px;
                  padding: 0 5px;
                  background: rgba($color: #000, $alpha: 0.8);
                  position: absolute;
                  bottom: 5%;
                  right: 5%;
                }
                .number {
                  background: url(/public/video-bd.png) no-repeat 0 0;
                  position: absolute;
                  top: 0;
                  left: 0;
                  width: 38px;
                  height: 38px;
                  background-size: 38px 160px;
                  display: flex;
                  align-items: center;

                  .list-num {
                    font-size: 20px;
                    font-weight: 700;
                    color: #fff;
                    padding: 4px 6px 8px 4px;
                  }
                }
                .num-position-one {
                  background-position: 0 -40px;
                }
                .num-position-two {
                  background-position: 0 -80px;
                }
                .num-position-three {
                  background-position: 0 -120px;
                }
              }
              .center {
                line-height: 18px;
                padding-left: 10px;

                .video-infotitle {
                  font-size: 14px;
                  width: 3.6rem;
                  font-weight: 700;
                  color: #333;
                  // padding: 10px 10px 20px;

                  display: -webkit-box;
                  -webkit-line-clamp: 1; //显示1行
                  -webkit-box-orient: vertical;
                  overflow: hidden;
                  // white-space: nowrap;
                  text-overflow: ellipsis; //多的用省略号显示

                  &:hover {
                    color: #f90;
                  }
                }
                .publish-info {
                  line-height: 18px;
                  font-size: 14px;
                  color: #939393;
                  padding-top: 5px;
                }
                .publish-info-min{
                  line-height: 18px;
                  font-size: 14px;
                  color: #939393;
                  padding-top: 5px;
                  display: none;
                }
                .publish-author {
                  display: flex;
                  align-items: center;
                  padding-top: 10px;

                  .publish-author-img {
                    width: 35px;
                    height: 35px;
                    border-radius: 50%;
                    overflow: hidden;
                    border: 1px solid #f5f5f5;

                    img {
                      display: block;
                      width: 100%;
                      border-radius: 50%;
                      object-fit: cover;

                      &:hover {
                        filter: brightness(90%);
                        opacity: 1;
                      }
                    }
                  }
                  .publish-author-name {
                    color: #939393;
                    font-size: 12px;
                    padding-left: 5px;

                    &:hover {
                      color: #f90;
                    }
                  }
                }
              }
            }

            .right {
              color: #939393;
              font-size: 12px;
              text-align: center;
              padding-right: 20px;

              .heat-num {
                font-size: 20px;
                font-weight: 700;
                color: #333;
              }
              .heat-one {
                font-size: 20px;
                font-weight: 700;
                color: #dc0101;
              }
              .heat {
                padding-top: 5px;
              }
            }

          }
          }
          @media screen and (min-width:512px) and (max-width:856px) {
            .info-of-video {
            width: 100%;
            border-radius: 5px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            cursor: pointer;
            background: #fff;
            .left {
              // width: 100%;
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding-left: 20px;

              .video-img {
                width: 170px;
                height: 100px;
                border-radius: 5px;
                overflow: hidden;
                position: relative;

                img {
                position: absolute;
                  display: block;
                  width: 100%;
                  height: 100%;
                  border-radius: 5px;
                  object-fit: cover;

                  &:hover {
                    filter: brightness(70%);
                    opacity: 1;
                  }
                }
                .duration {
                  color: #eee;
                  font-size: 12px;
                  padding: 0 5px;
                  background: rgba($color: #000, $alpha: 0.8);
                  position: absolute;
                  bottom: 5%;
                  right: 5%;
                }
                .number {
                  background: url(/public/video-bd.png) no-repeat 0 0;
                  position: absolute;
                  top: 0;
                  left: 0;
                  width: 38px;
                  height: 38px;
                  background-size: 38px 160px;
                  display: flex;
                  align-items: center;

                  .list-num {
                    font-size: 20px;
                    font-weight: 700;
                    color: #fff;
                    padding: 4px 6px 8px 4px;
                  }
                }
                .num-position-one {
                  background-position: 0 -40px;
                }
                .num-position-two {
                  background-position: 0 -80px;
                }
                .num-position-three {
                  background-position: 0 -120px;
                }
              }
              .center {
                line-height: 18px;
                padding-left: .1rem;

                .video-infotitle {
                  font-size: .14rem;
                  width: 3.6rem;
                  font-weight: 700;
                  color: #333;
                  // padding: 10px 10px 20px;

                  display: -webkit-box;
                  -webkit-line-clamp: 1; //显示1行
                  -webkit-box-orient: vertical;
                  overflow: hidden;
                  // white-space: nowrap;
                  text-overflow: ellipsis; //多的用省略号显示

                  &:hover {
                    color: #f90;
                  }
                }
                .publish-info {
                  line-height: 18px;
                  font-size: .14rem;
                  color: #939393;
                  padding-top: 5px;
                  display: none;
                }
                .publish-info-min{
                  line-height: 18px;
                  font-size: .14rem;
                  color: #939393;
                  padding-top: 5px;
                  display: block;
                }
                .publish-author {
                  display: flex;
                  align-items: center;
                  padding-top: .1rem;

                  .publish-author-img {
                    width: 35px;
                    height: 35px;
                    border-radius: 50%;
                    overflow: hidden;
                    border: 1px solid #f5f5f5;

                    img {
                      display: block;
                      width: 100%;
                      border-radius: 50%;
                      object-fit: cover;

                      &:hover {
                        filter: brightness(90%);
                        opacity: 1;
                      }
                    }
                  }
                  .publish-author-name {
                    color: #939393;
                    font-size: .12rem;
                    padding-left: 5px;

                    &:hover {
                      color: #f90;
                    }
                  }
                }
              }
            }

            .right {
              color: #939393;
              font-size: .12rem;
              text-align: center;
              padding-right: .2rem;

              .heat-num {
                font-size: .2rem;
                font-weight: 700;
                color: #333;
              }
              .heat-one {
                font-size: .2rem;
                font-weight: 700;
                color: #dc0101;
              }
              .heat {
                padding-top: 5px;
              }
            }

          }
          }
          @media screen  and (max-width:512px) {
            .info-of-video {
            width: 100%;
            border-radius: 5px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            cursor: pointer;
            background: #fff;
            .left {
              // width: 100%;
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding-left: 20px;

              .video-img {
                width: 142px;
                height: 100px;
                border-radius: 5px;
                overflow: hidden;
                position: relative;

                img {
                position: absolute;
                  display: block;
                  width: 100%;
                  height: 100%;
                  border-radius: 5px;
                  object-fit: cover;

                  &:hover {
                    filter: brightness(70%);
                    opacity: 1;
                  }
                }
                .duration {
                  color: #eee;
                  font-size: 12px;
                  padding: 0 5px;
                  background: rgba($color: #000, $alpha: 0.8);
                  position: absolute;
                  bottom: 5%;
                  right: 5%;
                }
                .number {
                  background: url(/public/video-bd.png) no-repeat 0 0;
                  position: absolute;
                  top: 0;
                  left: 0;
                  width: 38px;
                  height: 38px;
                  background-size: 38px 160px;
                  display: flex;
                  align-items: center;

                  .list-num {
                    font-size: 20px;
                    font-weight: 700;
                    color: #fff;
                    padding: 4px 6px 8px 4px;
                  }
                }
                .num-position-one {
                  background-position: 0 -40px;
                }
                .num-position-two {
                  background-position: 0 -80px;
                }
                .num-position-three {
                  background-position: 0 -120px;
                }
              }
              .center {
                line-height: 18px;
                padding-left: .1rem;

                .video-infotitle {
                  font-size: .14rem;
                  width: 3.6rem;
                  font-weight: 700;
                  color: #333;
                  // padding: 10px 10px 20px;

                  display: -webkit-box;
                  -webkit-line-clamp: 1; //显示1行
                  -webkit-box-orient: vertical;
                  overflow: hidden;
                  // white-space: nowrap;
                  text-overflow: ellipsis; //多的用省略号显示

                  &:hover {
                    color: #f90;
                  }
                }
                .publish-info {
                  line-height: 18px;
                  font-size: .14rem;
                  color: #939393;
                  padding-top: 5px;
                  display: none;
                }
                .publish-info-min{
                  line-height: 18px;
                  font-size: .14rem;
                  color: #939393;
                  padding-top: 5px;
                  display: block;
                }
                .publish-author {
                  display: flex;
                  align-items: center;
                  padding-top: .1rem;

                  .publish-author-img {
                    width: 30px;
                    height: 30px;
                    border-radius: 50%;
                    overflow: hidden;
                    border: 1px solid #f5f5f5;
                    display: none;

                    img {
                      display: block;
                      width: 100%;
                      border-radius: 50%;
                      object-fit: cover;

                      &:hover {
                        filter: brightness(90%);
                        opacity: 1;
                      }
                    }
                  }
                  .publish-author-name {
                    color: #939393;
                    font-size: .1rem;
                    padding-left: 5px;

                    &:hover {
                      color: #f90;
                    }
                  }
                }
              }
            }

            .right {
              color: #939393;
              font-size: .12rem;
              text-align: center;
              padding-right: .2rem;

              .heat-num {
                font-size: .18rem;
                font-weight: 700;
                color: #333;
              }
              .heat-one {
                font-size: .18rem;
                font-weight: 600;
                color: #dc0101;
              }
              .heat {
                padding-top: 5px;
              }
            }

          }
          }
        }
</style>
